<!-- eslint-disable vue/no-useless-template-attributes -->
<template>
	<a-card :bordered="false">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<!-- eslint-disable-next-line vue/no-useless-template-attributes -->
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizUserGroupAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<xn-batch-delete
						v-if="hasPerm('bizUserGroupBatchDelete')"
						:selectedRowKeys="selectedRowKeys"
						@batchDelete="deleteBatchBizUserGroup"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a-popconfirm title="确定要撤回吗？" @confirm="deleteBizGroupUser(record)">
							<a-button
								v-show="record.joinStatus === '待审核'"
								type="link"
								size="small"
								danger
								v-if="hasPerm('bizGroupDelete')"
								>撤回</a-button
							>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
</template>

<script setup name="group">
	import bizUserGroupApi from '@/api/biz/bizUserGroupApi'

	const tableRef = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '社团名称',
			dataIndex: 'groupName',
			align: 'center'
		},
		{
			title: '申请人名称',
			dataIndex: 'userName',
			align: 'center'
		},
		{
			title: '申请时间',
			dataIndex: 'createTime',
			align: 'center'
		},
		{
			title: '申请状态',
			dataIndex: 'joinStatus',
			align: 'center'
		}
	]
	// 操作栏通过权限判断是否显示
	if (hasPerm(['bizUserGroupApply', 'bizUserGroupBack'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 300
		})
	}
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		}
	}

	const getStatus = (value) => {
		if (value === 1) {
			return '已通过'
		}
		if (value === 2) {
			return '已拒绝'
		}
		if (value === 0) {
			return '待审核'
		}
		return '已撤回'
	}
	const loadData = (parameter) => {
		return bizUserGroupApi.bizMyApplyPage(parameter).then((data) => {
			data.records.forEach((item) => {
				item.joinStatus = getStatus(item.joinStatus)
			})
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const deleteBizGroupUser = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		bizUserGroupApi.bizUserGroupDelete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchBizUserGroup = (params) => {
		bizUserGroupApi.bizUserGroupDelete(params).then(() => {
			tableRef.value.clearRefreshSelected()
		})
	}
	// 处理审批
	const applyBizGroupUser = (record, method) => {
		let params = {
			applyId: record.id,
			method: method
		}
		bizUserGroupApi.bizUserGroupApply(params).then(() => {
			tableRef.value.clearRefreshSelected()
		})
	}
</script>
